<template>
	<div>
		<header class="bg-dark d-flex justify-content-between text-light p-2 align-items-center">
			<span @click="toIndex" class="text-lg" >{{current.store.name}}</span>
			<a @click="logout" href="javascript:void(0)" class="d-flex align-items-center text-light">
				<Icon type="md-person" />
				<span>{{current.user.account}}</span>
			</a>
		</header>
		<Row class="p-3 text-dark">
			<Col 
				:xs="12" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3"
				v-for="(item, key) in current.permissions" 
				:id="key" :key="key" :name="item.permissionId">
				<div :class="item.active ? 'border-primary border text-primary bg-white' : 'bg-primary text-white'" class="mx-2 mt-2 p-1 rounded shadow-lg">
					<div @click="triggerMenu(item)">
						<div class="text-center p-1">
							<Icon class="text-sl" :type="item.type.split('_')[1] ? (item.active ? item.type.split('_')[1]: item.type.split('_')[1]+'-outline') : 'ios-star'" />
						</div>
						<div v-if="!item.active" class="text-center text-df">{{item.name}}</div>
					</div>
					<div 
						v-show="item.active" class="mx-1 mb-2 p-1 bg-white">
						<MenuItem
							class=""
							v-for="(subItem, index) in item.permissions" 
							:name="subItem.permissionId"
							:to="subItem.path"
							>
							<div class="my-1 text-sm bg-primary p-1 rounded-pill text-light text-center">
								<Icon class="align-baseline" :type="subItem.type.split('_')[1] ? subItem.type.split('_')[1] : 'ios-star'" />
								<span class="text-center align-baseline ml-1">{{subItem.name}}</span>
							</div>
						</MenuItem>
					</div>
				</div>
			</Col>
		</Row>
		<section class="p-2">
			<router-tab :class="''" />
		</section>
	</div>
</template>

<script>
	import store from "../../common/store.js"
	export default {
		data() {
			return {
				currentUser: {
				}
				
			};
		},
		methods: {
			toIndex: function() {
				this.$router.replace({
					path: '/',
				})
			},
			triggerMenu: function(item) {
				if (item.active === undefined || item.active === null || item.active === false ) {
					item.active = true;
				} else {
					item.active = false;
				}
				this.$forceUpdate();
			},
			logout: () => {
				store.commit("loginOut");
			},
			showdata(){
				this.$router.push({
					name: 'dashboard',
				})
			}
		},
		computed: {
			current: function() {
				return store.state.currentUser;
			}
		}
	}
</script>

<style scoped>
	.layout {
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}

	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}

	.layout-nav {
		width: calc(100% - 100px);
		margin: 0 auto;
		margin-right: 20px;
	}
</style>
